<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>大声叭叭</title>
    <link rel="stylesheet" href="/static/css/bulma.min.css" th:href="@{/css/bulma.min.css}">
    <link rel="stylesheet" href="/static/css/community.css" th:href="@{/css/community.css}">
    <link rel="stylesheet" href="/static/css/hot.css" th:href="@{/css/hot.css}">
    <link rel="stylesheet" href="/static/css/notice.css" th:href="@{/css/notice.css}">
    <script type="text/javascript" src="/static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script type="text/javascript" src="/static/js/awesome.js" th:src="@{/js/awesome.js}"></script>
    <script type="text/javascript" src="/static/js/community.js" th:src="@{/js/community.js}"></script>
    <script type="text/javascript" src="/static/js/notice.js" th:src="@{/js/notice.js}"></script>
</head>
<body class="has-navbar-fixed-top">
<!-- 导航栏内容 -->
<div th:replace="~{common/nav::nav(current=${articleList.current},size=${articleList.size},keyword=${keyword})}"></div>
<!-- 中间部分内容 -->
<section class="section">
    <div class="container is-max-widescreen ">
        <div class="columns is-desktop index-top">
            <div id="left" class="column is-two-thirds">
                <div class="card index-card-border">
                    <div th:each="article:${articleList.getData()}">
                        <div class="columns index-article-list index-column-item ">
                            <div class="column is-one-fifth"
                                 th:if="${article.firstPicture!=null&&article.firstPicture!=''}" >
                                <figure class="image index-article-pic">
                                    <img th:src="${article.firstPicture}" src="/static/img/firstpic.jpg" alt="User Avatar">
                                </figure>
                            </div>
                            <div th:class="'column'+${(article.firstPicture!=null&&article.firstPicture!='')?' is-four-fifths':''}"
                                    class="column is-four-fifths">
                                <div>
                                    <strong>
                                        <a class="index-article-title"
                                           th:href="${'/question/'+article.username+'/'+article.articleId+'.html'}"
                                           th:utext="${article.title}"
                                           href="/question/sloan/1.html">中国未来经济怎么样</a>
                                    </strong>
                                </div>
                                <div>
                                    <span>
                                         <img class="rounded-avatar" th:src="${article.avatarUrl}" src="/static/img/000.jpg" alt="User Avatar">
                                         <i class="fa-solid fa-at"></i>
                                         <span th:text="${article.nickname}">Sloan</span>
                                    </span>
                                    <span class="ml-2" >
                                        <i class="fa-duotone fa-solid fa-calendar-days"></i>
                                        <span th:text="${#temporals.format(article.createdTime,'yyyy/MM/dd')}">2024-11-18</span>
                                    </span>
                                    <span class="ml-2">
                                        <i class="fa-regular fa-message"></i>
                                        <span th:text="${article.commentCount}">100</span>
                                    </span>
                                    <span class="ml-2">
                                        <i class="fa-regular fa-eye"></i>
                                        <span th:text="${article.view}">100</span>
                                    </span>
                                    <span class="ml-2">
                                        <i class="fa-regular fa-thumbs-up"></i>
                                            <span th:text="${article.likeCount}">100</span>
                                    </span>
                                    <span class="ml-2">
                                         <i class="fa-solid fa-tag"></i>
                                         <a class="tag is-light is-link index-tag"
                                            th:each="tag:${article.tags}"
                                            th:href="${'/question/tag/'+tag.id+'.html'}"
                                            th:text="${tag.name}">经济</a>
                                    </span>
                                </div>
                                <span class="index-article-content-size">
                                    <span th:utext="${article.content}">未来三年请务必谨慎中国将面临重大的变革，由于当前国内外局势的不确定性以及一些不宜公开的原因，未来三年需要特别注意。...</span>
                                    <a href="#"
                                       th:href="${'/question/'+article.username+'/'+article.articleId+'.html'}"
                                    > 阅读全文</a>
                                </span>
                            </div>
                        </div>
                        <div class="divider"></div>
                    </div>

                    <div class="index-page index-page-item">
                        <nav class="pagination is-rounded" role="navigation" aria-label="pagination">
                            <a href="#" class="pagination-previous"
                               th:if="${articleList.hasPrePage}"
                               th:href="@{'/index.html?current='+${articleList.prePage}+'&size='+${articleList.size}+${keyword==null?'':'&keyword='+keyword}}">
                                上一页
                            </a>
                            <a href="#"
                               th:if="${articleList.hasNextPage}"
                               th:href="@{'/index.html?current='+${articleList.nextPage}+'&size='+${articleList.size}+${keyword==null?'':'&keyword='+keyword}}"
                               class="pagination-next">下一页
                            </a>
                            <ul class="pagination-list">
                                <li>
                                    <a href="#"
                                       th:href="@{'/index.html?current='+${articleList.firstPage}+'&size='+${articleList.size}+${keyword==null?'':'&keyword='+keyword}}"
                                       th:text="${articleList.firstPage}"
                                       th:class="${articleList.current.equals(articleList.firstPage)?'pagination-link is-current':'pagination-link'}"
                                       class="pagination-link" aria-label="Goto page 1">
                                        1
                                    </a>
                                </li>
                                <li th:if="${articleList.lastPage > articleList.firstPage}" ><span  class="pagination-ellipsis">&hellip;</span></li>

                                <li th:each="num:${articleList.nums}">
                                    <a class="pagination-link is-current"
                                       th:class="${articleList.current.equals(num)?'pagination-link is-current':'pagination-link'}"
                                       th:href="@{'/index.html?current='+${num}+'&size='+${articleList.getSize()}+${keyword==null?'':'&keyword='+keyword}}"
                                       aria-label="Goto page 1" th:text="${num}">40</a>
                                </li>
                                <li th:if="${articleList.firstPage < articleList.lastPage}"> <span  class="pagination-ellipsis">&hellip;</span></li>
                                <li th:if="${articleList.lastPage!=articleList.firstPage && articleList.lastPage>0}">
                                    <a href="#"
                                       th:href="@{'/index.html?current='+${articleList.lastPage}+'&size='+${articleList.size}+${keyword==null?'':'&keyword='+keyword}}"
                                       th:text="${articleList.lastPage}"
                                       th:class="${articleList.current.equals(articleList.lastPage)?'pagination-link is-current':'pagination-link'}"
                                       class="pagination-link " aria-label="Goto page 86">86
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>

            </div>

            <div id="right" class="column is-one-third">
                <div class="card index-card-border">
                    <p class="card-header-title hot-article-header">
                        <i class="fa-solid fa-fire"></i>
                        热榜
                    </p>
                    <div class="divider"></div>
                    <div class="hot-content">
                        <div class="hot-item" th:each="hot:${hotList}">
                            <span class="first-rank"
                                  th:class="${hot.index==1?'first-rank':(hot.index==2?'second-rank':(hot.index==3?'third-rank':''))}"
                                  th:text="${hot.index}">1</span>
                            <a class="hot-article-title"
                                  th:href="${'/question/'+hot.username+'/'+hot.articleId+'.html'}"
                                  th:data-full-text="${hot.title}"
                                  th:text="${hot.title}"
                                  data-full-text="中国经济2025年会怎么样，未来五年可能会影响全球格局以及中国经济的深远变化...">
                                中国经济2025年会怎么样，未来五年可能会影响全球格局以及中国经济的深远变化...</a>
                            <span class="hot-num" th:text="${hot.hotCountText}">9999</span>
                        </div>
                        <!--  <div class="hot-item">
                            <span class="second-rank">2</span>
                            <a class="hot-article-title" data-full-text="中国经济2025年会怎么样，全球经济竞争与合作新格局的讨论...">中国经济2025年会怎么样...</a>
                            <span class="hot-num">8888</span>
                        </div>
                        <div class="hot-item">
                              <span class="third-rank">3</span>
                              <span class="hot-article-title" data-full-text="中国经济2025年会怎么样，探讨国内经济结构调整与创新发展路线图...">中国经济2025年会怎么样...</span>
                              <span class="hot-num">7777</span>
                          </div>
                          <div class="hot-item">
                              <span>4</span>
                              <span class="hot-article-title" data-full-text="中国经济2025年会怎么样，未来十年经济改革政策和市场趋势的预测...">中国经济2025年会怎么样...</span>
                              <span class="hot-num">6666</span>
                          </div>
                          <div class="hot-item">
                              <span>5</span>
                              <span class="hot-article-title" data-full-text="中国经济2025年会怎么样，社会与经济的发展如何引领未来...">中国经济2025年会怎么样...</span>
                              <span class="hot-num">5555</span>
                          </div>-->
                    </div>


                 <!--   <div class="columns">
                        <div class="column is-auto-fill">
                            <div>
                                <p class="card-header-title" style="display: flex; align-items: center;">
                                    标签 &nbsp;
&lt;!&ndash;                                    <i class="fa-solid fa-tag"></i>&ndash;&gt;
                                    <i class="fa-solid fa-fire"></i>
                                    <a href="/question/tag" th:href="@{/question/tag.html}" class="is-right" style="margin-left: auto;">更多 ></a>
                                </p>
                            </div>
                            <div class="divider"></div>
                            <div>
                                <a th:each="tag, stat : ${tagList}"
                                   th:href="${'/question/tag/'+tag.id+'.html'}"
                                   th:class="'button is-small is-rounded is-focused index-tag-content ' +
                                        ${styles[stat.index % styles.size()]}"
                                   class="button is-small is-rounded is-focused index-tag-content">
                                    <span th:text="${tag.name}">经济</span>
                                </a>
                            </div>
                        </div>
                    </div>-->
                </div>

                <!--<div class="card index-card-border">
                    <div class="columns">
                        <div class="column is-auto-fill">
                            <div>
                                <p class="card-header-title">
                                    代办 &nbsp;
                                    <i class="fa-solid fa-tag"></i>
                                </p>
                            </div>
                            <div class="divider"></div>
                            <div class="card-content">
                                <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
                                    iaculis mauris.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>-->

            </div>
        </div>
    </div>
</section>
<!-- 底部部分内容 -->
<div th:replace="~{common/footer::footer}"></div>
</body>
</html>